<template>
		<router-view v-slot="{ Component }" v-if="loginFlag">
			<transition name="el-fade-in-linear" mode="out-in">
				<component :is="Component" />
			</transition>
		</router-view>
		
		<div v-else v-loading="true" class="login-loadding" element-loading-text="加载中...">
		</div>
</template>

<script>
import { autoLogin } from '@/api/user.js';
export default {
	data() {
		return {
			windowHeight: 0,
			loginFlag: false
		};
	},
	created() {
		this.initHeight();
		let arr = window.localStorage.getItem('tempArr');
		this.autoUserLogin();
	},
	methods: {
		initHeight() {
			this.windowHeight = window.innerHeight;
		},
		async autoUserLogin() {
			this.loginFlag=false
			let res = await autoLogin();
			let timer=setTimeout(() => {
				this.loginFlag=true
			}, 100);
			console.log('自动登录', res.code);
			if (res.code == 200) {
				console.log(res)
				this.$store.commit('user/setUser', res.data);
				this.$nextTick(()=>{
					clearTimeout(timer)
					this.loginFlag=true
				})
			}
		}
	},
	mounted() {
		window.addEventListener('resize', this.initHeight);
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.initHeight);
		// window.removeEventListener('wheel', this.handleWeelEvent)
	}
};
</script>

<style lang="scss">
* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
	font-family: 'Microsoft Yahei Light', 'Microsoft Yahei', PingFangSC-Regular, Helvetica, sans-serif, '等线';
}
.jc {
	display: flex;
	justify-content: center;
	align-items: center;
}
.ac {
	text-align: center;
}

html,
body,
#app {
	overflow: hidden;
	height: 100%;
	.el-icon{
				width:16px;
				color: #53a8ff;
			}
			.login-loadding{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
}
@media screen and (max-width: 650px) {
	body {
		.el-message-box {
			width: 300px !important;
		}
		.el-message {
			min-width: 300px;
		}
		.el-dialog {
			width: 80% !important;
		}
	}
}

.fiexd-btn {
		position: fixed;
		width: 40px;
		height: 40px;
		box-shadow: 0 0 6px rgb(0 0 0 / 12%);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		color: #409eff;
		transition: all 0.2s;
		right: 30px;
		bottom: 30px;
		&:hover {
			background-color: #f2f6fc;
		}
		.el-image{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
